<template>
    <el-dialog :center="false" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true"
               title="预览表单"
               top="20px" v-model="dialogTableVisible" width="80%">

<dynamic-form-fields :fields-list="fieldDataList" form-info="formInfo"/>
    </el-dialog>

    <div class="dynamic-form">
        <field-panel class="field-panel" @create-row="createRow"></field-panel>
        <div class="content">
            <div class="form-button">

                <el-button  type="primary" link @click="saveForm">
                    <user-icon icon="save" />
                    <span style="vertical-align: middle;">  保存 </span>
                </el-button>
                <el-button  type="primary" link @click="newForm">
                    <user-icon icon="plus" />
                    <span style="vertical-align: middle;"> 新增 </span>
                </el-button>
                <el-button  type="primary" link @click="preview">
                    <user-icon icon="search" />
                    <span style="vertical-align: middle;">  预览 </span>
                </el-button>
            </div>
            <el-form ref="form" :model="formInfo" label-width="80px" v-infinite-scroll="load"
                     style="overflow: auto;height: 80%;">
                <el-row v-for="rIndex of datas.rows" :key="rIndex" :name="'row_'+rIndex">
                    <el-col style="border: 2px dotted royalblue;height: 40px;"
                            :name="'column_'+rIndex+'_'+sIndex" :span="24/datas.columns"
                            :key="sIndex" v-for="sIndex of datas.columns"
                            :rowIndex="rIndex" :colIndex="sIndex"
                            @click="editProp('column_'+rIndex+'_'+sIndex)"
                            @dragover="allowDrop('column_'+rIndex+'_'+sIndex,$event)"
                            @drop="drop('column_'+rIndex+'_'+sIndex,$event)">{{rIndex}}请插入组件
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <properties-panel :item-name="itemName" @updateFormData="updateFormData" @updateFieldData="updateFieldData"
                          @updateTabname="updateTabname"
                          :datas="datas" :tab-name="tabName" :form-action="formAction"></properties-panel>
    </div>
</template>

<script>
    import FieldPanel from "./FieldPanel";
    import PropertiesPanel from "./PropertyPanel";
    import {confirm} from "../../utils/message";
    import fdata from "./form_data.json";
    import $ from "jquery";
    import DynamicFormFields from "./DynamicFormFields";

    export default {
        name: "DynamicForm",
        components: {DynamicFormFields, FieldPanel, PropertiesPanel},
        data() {
            return {
                itemName: "",
                dialogTableVisible: false,
                fieldDataList: [],
                formAction: "new",
                tabName: "form",
                datas: {
                    columns: 2,
                    rows: 2
                },
                formInfo: {}
            }
        },
        methods: {
            load() {

            },
            preview() {
                this.dialogTableVisible = !this.dialogTableVisible;
            },
            saveForm() {

            },
            newForm() {
                let _this = this;
                if (_this.formInfo && JSON.stringify(_this.formInfo) != '{}') {
                    confirm("新建表单，已编辑的所有数据会丢失，确认新建吗？", function () {
                        _this.clearData();
                    });
                } else {
                    _this.clearData();
                }

            },
            clearData() {
                let _this = this;
                _this.formInfo = {};
                _this.datas.rows = 1;
                _this.formAction = "new";
                _this.datas.columns = 1;
            },
            allowDrop(data, e) {
                e.preventDefault();
            },
            updateTabname(data) {
                this.tabName = data;
            },
            updateFieldData(data) {
                /**
                 * 整理数据，将数据拼装成2维数组，时间复杂度有点高，后期考虑优化
                 * @type {number}
                 */
                this.fieldDataList = [];
                let cols = this.datas.columns;
                let rows = this.datas.rows;
                for (let row = 0; row < rows; row++) {
                    let rowData = [];
                    for (let col = 0; col < cols; col++) {
                        for (let key in data) {
                            let temp = data[key];
                            if ((row + 1) == temp.rowIndex && (col + 1) == temp.colIndex) {
                                rowData.push(temp);
                            }
                        }
                    }
                    this.fieldDataList.push(rowData);
                }
                console.log(rows, cols, data, this.fieldDataList);
            },
            updateFormData(data) {
                this.formInfo = data;
                this.datas.columns = data.columns;
                this.datas.rows = data.rows;
            },
            editProp(columnName) {
                let node = $("div[name='" + columnName + "']");
                let itemName = node.attr("itemName");
                //未放置表单元素的节点不派发事件
                if (!itemName || itemName.startsWith("undefined")) {
                    this.updateTabname("form");
                    return;
                }
                let rowIndex = node.attr("rowIndex");
                let colIndex = node.attr("colIndex");
                this.itemName = {itemName: itemName + "_" + rowIndex + "_" + colIndex,dataType:itemName, rowIndex, colIndex};
                console.log(this.itemName);
                this.updateTabname("node");
            },
            dynamicClass(isAdd) {
                for (let i = 1; i <= this.datas.rows; i++) {
                    $("div[name='row_" + i + "']").children().each(function (index, item) {
                        let data = $(this).html();
                        if (data.length < 10) {
                            if (isAdd) {
                                $(this).addClass("col_active");
                            } else {
                                $(this).removeClass("col_active");
                            }
                        }
                    });
                }
            },
            drop(data, e) {
                e.preventDefault();
                this.dynamicClass(false);
                let temp = e.dataTransfer.getData("Text");
                $("div[name='" + data + "']").attr("itemName", temp);
                $("div[name='" + data + "']").html(fdata[temp]);
                this.editProp(data);
            },
            createRow(name) {
                let flag = false;
                this.dynamicClass(true);
                // this.itemName = name;
                $("div[name='row_" + this.datas.rows + "']").children().each(function (index, item) {
                    let data = $(this).html();
                    console.log(data);
                    if (data.length < 10) {
                        flag = true;
                    }
                });
                if (!flag) {
                    this.datas.rows = this.datas.rows + 1;
                }
            }
        }
    }
</script>

<style scoped>
    .form-button {
        display: flex;
        flex-direction: row;
        background-color: #f7f7f7;
        padding: 5px 5px;
    }

    .col_active {
        box-sizing: border-box;
        top: -2px;
        left: -2px;
        width: 214px;
        height: 38px;
        box-shadow: #F56C6C 0px 0px 4px;
        box-shadow: #000;
        animation: myfirst 0.5s linear;
        -webkit-animation: myfirst 0.5s linear;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }

    @keyframes myfirst {
        0% {
            opacity: 1;
        }
        25% {
            opacity: 0.85;
        }
        50% {
            opacity: 0.75;
        }
        75% {
            opacity: 0.65;
        }
        100% {
            opacity: 0.25;
        }
    }

    @-webkit-keyframes myfirst {
        0% {
            opacity: 1;
        }
        25% {
            opacity: 0.85;
        }
        50% {
            opacity: 0.65;
        }
        75% {
            opacity: 0.65;
        }
        100% {
            opacity: 0.25;
        }
    }

    .dynamic-form {
        border: 1px solid red;
        display: flex;
        height: 100%;
    }

    .field-panel {
        width: 15%;
        border: 1px solid blueviolet;
    }

    .content {
        width: 70%;
        border: #1989fa solid 1px;
        background: url("") repeat !important;
    }

    .properties-panel {
        width: 25%;
        right: 0;
        position: relative;
    }
</style>